<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <header class="mui-bar mui-bar-nav layout-bg">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
            <h1 class="mui-title">修改密码</h1>
        </header>

        <div class="login-wrapper edit-wrapper layout-gap">
            <form class="auth-data">
                <div class="mui-flex bor-b">
                    <div class="cell fixed">
                        <span class="auth-text password-text">当前密码</span>
                    </div>
                    <div class="cell">
                        <input class="auth-input" type="password" name="password" value="" placeholder="请输入当前密码" />
                    </div>
                </div>
                <div class="mui-flex">
                    <div class="cell fixed">
                        <span class="auth-text password-text">新密码</span>
                    </div>
                    <div class="cell">
                        <input class="auth-input" type="password" name="new_password" value="" placeholder="请设置至少6位数字或字母新密码" />
                    </div>
                </div>
                <div class="mui-flex">
                    <div class="cell fixed">
                        <span class="auth-text password-text">确认新密码</span>
                    </div>
                    <div class="cell">
                        <input class="auth-input" type="password" name="repeat_password" value="" placeholder="请确认新密码" />
                    </div>
                </div>
            </form>
        </div>

        <button type="button" class="pay-btn layout-bg edit-password-btn">确认修改</button>
    </div>

    <script>
        $(function () {
            $('.edit-password-btn').on('click', function() {
                var param = $('.auth-data').serializeObject();

                if ($.trim(param.password) == '' || $.trim(param.new_password) == '' || $.trim(param.repeat_password) == '') {
                    mui.toast('请填写完整');
                    return;
                }

                if ($.trim(param.password).length < 6 || $.trim(param.password).length > 16) {
                    mui.toast('当前密码长度应在6~16位之间');
                    return;
                }

                if ($.trim(param.new_password).length < 6 || $.trim(param.new_password).length > 16) {
                    mui.toast('新密码长度应在6~16位之间');
                    return;
                }

                if ($.trim(param.repeat_password).length < 6 || $.trim(param.repeat_password).length > 16) {
                    mui.toast('确认密码长度应在6~16位之间');
                    return;
                }

                if ($.trim(param.new_password) != $.trim(param.repeat_password)) {
                    mui.toast('新密码和确认密码不一致');
                    return;
                }
            })
        })
    </script>
</body>
</html>